@material/checkbox
Advanced tools
@material/checkbox is a Material Design implementation of a checkbox component. It provides a customizable and accessible checkbox that can be used in web applications to allow users to make binary choices.
Basic Checkbox
This code demonstrates how to initialize a basic Material Design checkbox using the @material/checkbox package.
import {MDCCheckbox} from '@material/checkbox';
const checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));Indeterminate State
This code shows how to set a checkbox to an indeterminate state, which is useful for indicating a mixed selection.
import {MDCCheckbox} from '@material/checkbox';
const checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));
checkbox.indeterminate = true;Handling Change Events
This code demonstrates how to listen for change events on the checkbox and handle them accordingly.
import {MDCCheckbox} from '@material/checkbox';
const checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));
checkbox.listen('change', () => {
console.log('Checkbox state changed to: ', checkbox.checked);
});react-checkbox-group is a React component for managing a group of checkboxes. It provides a simple API for handling multiple checkboxes and their states. Unlike @material/checkbox, which is a standalone Material Design component, react-checkbox-group is specifically designed for React applications and focuses on managing groups of checkboxes.
rc-checkbox is a React component for creating customizable checkboxes. It offers more flexibility in terms of styling and behavior compared to @material/checkbox. While @material/checkbox follows Material Design guidelines, rc-checkbox allows for more customization options.
react-toggle is a React component for creating toggle switches, which can be used as an alternative to checkboxes. It provides a different UI/UX compared to @material/checkbox but serves a similar purpose of allowing users to make binary choices. It is more suitable for applications that prefer toggle switches over traditional checkboxes.
Checkboxes allow the user to select one or more items from a set.
npm install @material/checkbox
We recommend using MDC Checkbox with MDC Form Field for enhancements such as label alignment, label activation of the ripple interaction effect, and RTL-awareness.
<div class="mdc-form-field">
<div class="mdc-checkbox">
<input type="checkbox"
class="mdc-checkbox__native-control"
id="checkbox-1"/>
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="checkbox-1">Checkbox 1</label>
</div>
Note: If you are using IE, you need to include a closing
</path>tag if you wish to avoid console warnings.
@import "@material/form-field/mdc-form-field";
@import "@material/checkbox/mdc-checkbox";
The checkbox will work without JavaScript, but you can enhance it with a ripple interaction effect by instantiating MDCCheckbox on the mdc-checkbox element. To activate the ripple effect upon interacting with the label, you must also instantiate MDCFormField on the mdc-form-field element and set the MDCCheckbox instance as its input.
import {MDCFormField} from '@material/form-field';
import {MDCCheckbox} from '@material/checkbox';
const checkbox = new MDCCheckbox(document.querySelector('.mdc-checkbox'));
const formField = new MDCFormField(document.querySelector('.mdc-form-field'));
formField.input = checkbox;
See Importing the JS component for more information on how to import JavaScript.
Note that mdc-checkbox--disabled is necessary on the root element of CSS-only checkboxes to prevent hover states from activating. Checkboxes that use the JavaScript component do not need this class; a disabled attribute on the <input> element is sufficient.
<div class="mdc-checkbox mdc-checkbox--disabled">
<input type="checkbox"
id="basic-disabled-checkbox"
class="mdc-checkbox__native-control"
disabled />
<div class="mdc-checkbox__background">
<svg class="mdc-checkbox__checkmark"
viewBox="0 0 24 24">
<path class="mdc-checkbox__checkmark-path"
fill="none"
d="M1.73,12.91 8.1,19.28 22.79,4.59"/>
</svg>
<div class="mdc-checkbox__mixedmark"></div>
</div>
</div>
<label for="basic-disabled-checkbox" id="basic-disabled-checkbox-label">This is my disabled checkbox</label>
MDC Checkbox uses MDC Theme's secondary color by default for "marked" states (i.e., checked or indeterminate).
The following mixins apply only to enabled checkboxes. It is not currently possible to customize the color of a disabled checkbox.
| Mixin | Description |
|---|---|
mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes) | Generates CSS classes to set and animate the stroke color and/or container fill color of a checkbox |
mdc-checkbox-ink-color($color) | Sets the ink color of the checked and indeterminate icons |
mdc-checkbox-focus-indicator-color($color) | Sets the color of the focus indicator (ripple) when checkbox is selected or is in indeterminate state. |
mdc-checkbox-touch-dimension($touch-dimension) | Sets the touch dimension of the checkbox. |
The ripple effect for the Checkbox component is styled using MDC Ripple mixins.
mdc-checkbox-container-colors($unmarked-stroke-color, $unmarked-fill-color, $marked-stroke-color, $marked-fill-color, $generate-keyframes)Stroke and fill color may be customized independently in both the marked and unmarked state.
All parameters are optional, and if left unspecified will use their default values.
If you plan to use CSS-only checkboxes, set $generate-keyframes to false to prevent the mixin from generating @keyframes and CSS classes used by the JavaScript component.
In browsers that fully support CSS variables, MDC Checkbox references CSS variables wherever theme properties are used.
However, due to Edge's buggy CSS variable support, the background-color for .mdc-checkbox__background::before will not honor CSS variables in Edge.
This means you will need to override this style manually for Edge if you alter the CSS variable for the primary color.
MDCCheckbox Properties and Methods| Property Name | Type | Description |
|---|---|---|
checked | boolean | Setter/getter for the checkbox's checked state |
indeterminate | boolean | Setter/getter for the checkbox's indeterminate state |
disabled | boolean | Setter/getter for the checkbox's disabled state |
value | string | Setter/getter for the checkbox's |
If you are using a JavaScript framework, such as React or Angular, you can create a Checkbox for your framework. Depending on your needs, you can use the Simple Approach: Wrapping MDC Web Vanilla Components, or the Advanced Approach: Using Foundations and Adapters. Please follow the instructions here.
MDCCheckboxAdapter| Method Signature | Description |
|---|---|
addClass(className: string) => void | Adds a class to the root element. |
removeClass(className: string) => void | Removes a class from the root element. |
forceLayout() => void | Force-trigger a layout on the root element. This is needed to restart animations correctly. If you find that you do not need to do this, you can simply make it a no-op. |
isAttachedToDOM() => boolean | Returns true if the component is currently attached to the DOM, false otherwise. |
isIndeterminate() => boolean | Returns true if the component is in the indeterminate state. |
isChecked() => boolean | Returns true if the component is checked. |
hasNativeControl() => boolean | Returns true if the input is present in the component. |
setNativeControlDisabled(disabled: boolean) => void | Sets the input to disabled. |
setNativeControlAttr(attr: string, value: string) => void | Sets an HTML attribute to the given value on the native input element. |
removeNativeControlAttr(attr: string) => void | Removes an attribute from the native input element. |
MDCCheckboxFoundation| Method Signature | Description |
|---|---|
setDisabled(disabled: boolean) => void | Updates the disabled property on the underlying input. Does nothing when the underlying input is not present. |
handleAnimationEnd() => void | animationend event handler that should be applied to the root element. |
handleChange() => void | change event handler that should be applied to the checkbox element. |
4.0.0 (2019-11-02)
overflow: visible to button. (#4973) (905e84e)checkbox: mdc-checkbox-ink-color mixin now only applies to enabled checkboxes
chips: Chips markup, adapters, foundations, and events have changed.
select: In MDCMenu and MDCMenuSurface, hoistMenuToBody adapter method removed. In MDCSelect, HTML structure changed: the select anchor is now wrapped in a parent element, and the anchor's sibling is the select menu. Support for native select removed. Support added for select with no label. MDCSelectAdapter methods removed: getValue, setValue, isMenuOpen, setSelectedIndex, checkValidity, setValid, toggleClassAtIndex. MDCSelectAdapter methods added: hasLabel, getSelectedMenuItem, setSelectedText, isSelectedTextFocused, get/setSelectedTextAttr, getAnchorElement, setMenuAnchorElement, setMenuAnchorCorner, setMenuWrapFocus, set/removeAttributeAtIndex, focusMenuItemAtIndex, getMenuItemValues, getMenuItemCount, getMenuItemCount, getMenuItemAttr, getMenuItemTextAtIndex, add/removeClassAtIndex. MDCSelectFoundation setValue method removed; getDisabled, handleMenuItemAction, getSelectedIndex, get/setRequired, init added.
radio: In Checkbox, Renamed sass variables $mdc-radio-touch-area => $mdc-radio-ripple-size & $mdc-radio-ui-size => $mdc-radio-icon-size to be consistent with checkbox. Also, removed $mdc-radio-ui-pct sass variable.
switch: Renames switch variables $mdc-switch-tap-target-size => $mdc-switch-ripple-size, removes $mdc-switch-tap-target-initial-position and $mdc-switch-native-control-width.
list: New adapter method listItemAtIndexHasClass
list: Renamed mixin mdc-list-item-shape-radius() => mdc-list-single-line-shape-radius()
linear-progress: MDCLinearProgressAdapter adapter has new forceLayout method
text-field: Removed sass variable in notched outline - $mdc-notched-outline-transition-duration.
mdc-fab: This changes the structure of the FAB element by moving the ripple from the outer element to an inner mdc-fab__ripple element.
OLD
<button class="mdc-fab" aria-label="Favorite">
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
NEW
<button class="mdc-fab" aria-label="Favorite">
<div class="mdc-fab__ripple"></div>
<span class="mdc-fab__icon material-icons">favorite</span>
</button>
radio: Ripple has been moved to a child element. See readme for updates.
slider: remove adapter methods appendTrackMarkers, removeTrackMarkers , setLastTrackMarkersStyleProperty , and add adapter method setTrackMarkers.
button: This changes the structure of the button element by moving the ripple from the outer <button> element to an inner mdc-button__ripple element.
OLD
<button class="mdc-button">
<span class="mdc-button__label">Hello World</span>
</button>
NEW
<button class="mdc-button">
<div class="mdc-button__ripple"></div>
<span class="mdc-button__label">Hello World</span>
</button>
chips: MDCChipSetAdapter#removeChip has been replaced with MDCChipSetAdapter#removeChipAtIndex. MDCChipSetAdapter#setSelected has been replaced with MDCChipSetAdapter#selectChipAtIndex
density: Renamed sass mixins & variables in MDC Data Table - mdc-data-table-header-row-height => mdc-data-table-header-cell-height & mdc-data-table-row-height => mdc-data-table-cell-height. Also removed mdc-button--dense variant, use button's density mixin instead.
Note: For older changes, see the changelog archive.
FAQs
The Material Components for the web checkbox component
The npm package @material/checkbox receives a total of 323,675 weekly downloads. As such, @material/checkbox popularity was classified as popular.
We found that @material/checkbox demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 15 open source maintainers collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Security News
Node.js will be enforcing stricter semver-major PR policies a month before major releases to enhance stability and ensure reliable release candidates.
Security News
Research
Socket's threat research team has detected five malicious npm packages targeting Roblox developers, deploying malware to steal credentials and personal data.
Security News
vlt introduced its new package manager and a serverless registry this week, innovating in a space where npm has stagnated.